<template>
  <div>
    <pannel title="商品列表">
      <el-table :data="tableData" style="width: 100%" :default-expand-all="true">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-row>
                <el-col :xs="24" :sm="12" :lg="8">
                  <el-form-item label="商品ID">
                    {{ props.row.id }}
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8">
                  <el-form-item label="商品名">
                    {{ props.row.name }}
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8">
                  <el-form-item label="所属分类">
                    {{ props.row.category }}
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8">
                  <el-form-item label="商品价格">
                    {{ props.row.price }}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="商品名" prop="name"> </el-table-column>
        <el-table-column label="商品分类" prop="category"> </el-table-column>
        <el-table-column label="商品价格" prop="price"> </el-table-column>
        <el-table-column label="商品图片">
          <template slot-scope="scope">
            <img :src="scope.row.imgUrl | getUrl" class="img" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="toGoodsInfo(scope.row.id)">编辑</el-button>

            <el-button type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :current-page="page"
        :page-size="pageSize"
        :pager-count="5"
        @current-change="changePage"
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </pannel>
  </div>
</template>

<script>
import Pannel from "@/components/Pannel.vue";
import { goodsList } from "@/api/goods";
export default {
  data() {
    return {
      tableData: [],
      pageSize: 5,
      total: 0,
      page: 1,
    };
  },
  components: { Pannel },
  methods: {
    //跳转到详情页
    toGoodsInfo(id){
      //跳转页面
      this.$router.push('/goodsInfoEdit?id='+id)
    },



    async getGoodsList() {
      let data = {
        currentPage: this.page,
        pageSize: this.pageSize,
      };
      let res = await goodsList(data);
      this.total = res.total;
      this.tableData = res.data;
      console.log(this.tableData);
    },
    //页码改变
    changePage(page) {
      this.page = page;
    },
  },
  filters: {
    getUrl(url) {
      return "http://localhost:5000" + url;
    },
  },
  created() {
    this.getGoodsList();
  },
};
</script>

<style lang="less" scoped>
.img {
  width: 50px;
  height: 50px;
}
</style>